/**
给地图添加一个 Canvas 绘制的指北针
(按住Alt+Shift并拖拽地图即可旋转地图。)
*/
<template>
    <div>
        <div ref="map" id="map"></div>
        <!--  <div class="btns">
              <button @click="showStyle('circle')">显示样式circle</button>
              <button @click="showStyle('icon')">显示样式icon</button>

              <button @click="addMarkers">添加自定义图标</button>
          </div>-->
        <div id="mouse-position"></div>

        <div class="wrap">
            <div ref="compass" class="compass"></div>
        </div>
    </div>

</template>

<script>
    import "ol/ol.css";
    import {Map, View} from "ol";
    import TileLayer from "ol/layer/Tile";
    import XYZ from "ol/source/XYZ";
    import {Rotate} from "ol/control"

    export default {
        name: "NorthCompass",
        data() {
            // this.drawSource = null;
            return {
                map: null,
                drawSource: null,
            };
        },
        mounted() {
            // 创建地图
            this.initMap();
        },
        methods: {
            /**
             * 初始化一个 openlayers 地图
             */
            initMap() {
                this.map = new Map({
                    target: "map",
                    // controls: defaults().extend([mousePositionControl]),  // 将鼠标位置控件加入到地图默认控件中
                    view: new View({
                        center: [113.5, 34.7],
                        zoom: 10,
                        projection: "EPSG:4326",
                    }),
                });

                var gaodeLayer = new TileLayer({
                    source: new XYZ({
                        url: "http://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
                    })
                });
                this.map.addLayer(gaodeLayer);

                const rotateControl = new Rotate({
                    label: this.createCompassSymbol(),
                    tipLabel: '指北针',
                    autoHide: false,
                    target: this.$refs.compass
                });
                this.map.addControl(rotateControl);
            },

            createCompassSymbol(width, color) {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext("2d");
                let s = canvas.width = canvas.height = width || 72;
                let r = s / 2;

                ctx.translate(r, r);
                ctx.fillStyle = color || '#333';
                ctx.lineWidth = 4;
                ctx.lineJoin = ctx.lineCap = 'round';

                ctx.font = 'bold ' + (r * 0.4) + 'px sans-serif';
                ctx.textBaseline = 'bottom';
                ctx.textAlign = 'center';
                ctx.strokeStyle = '#fff';
                ctx.globalAlpha = .75;
                ctx.strokeText('N', 0, -r / 2 - 2);
                ctx.globalAlpha = 1;
                ctx.fillText('N', 0, -r / 2 - 2);
                ctx.beginPath();
                ctx.moveTo(0, r / 4);
                ctx.lineTo(r / 3, r / 2);
                ctx.lineTo(0, -r / 2);
                ctx.lineTo(-r / 3, r / 2);
                ctx.lineTo(0, r / 4);
                ctx.lineWidth = 8;
                ctx.fillStyle = "#fff";
                ctx.globalAlpha = .75;
                ctx.fill();
                ctx.stroke();
                ctx.globalAlpha = 1;

                ctx.fillStyle = ctx.strokeStyle = color || '#333';
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.moveTo(0, r / 4);
                ctx.lineTo(0, -r / 2);
                ctx.lineTo(r / 3, r / 2);
                ctx.lineTo(0, r / 4);
                ctx.fill();
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(0, r / 4);
                ctx.lineTo(0, -r / 2);
                ctx.lineTo(-r / 3, r / 2);
                ctx.lineTo(0, r / 4);
                ctx.stroke();

                return canvas;
            },
        }
    };

</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    /*移除OSM的链接*/
    :deep(.ol-attribution) {
        display: none;
    }

    .compass {
        position: absolute;
        left: 8px;
        top: 8px;
    }

    ::v-deep .ol-control {
        position: static;
        background-color: transparent;
        border: none;

    button {
        display: block;
        margin: 0px;
        padding: 0;
        font-weight: normal;
        text-decoration: none;
        font-size: inherit;
        text-align: center;
        height: none;
        width: auto;
        background-color: transparent;
        border: none;
        cursor: pointer;

    &
    ::-moz-focus-inner {
        border: none;
        padding: 0;
    }

    &
    :hover,

    &
    :focus {
        text-decoration: none;
        outline: none;
    }

    }
    }
</style>